<template>
	<view class="zcBody">

		<view class="titlesName">用户注册</view>

		<view class="userDetails">

			<view class="Items">
				<text class="titles">手机号码</text>
				<view class="inputDiv">
					<input class="inputClass" type="number" v-model="phone" />
				</view>
			</view>

			<view class="Items m-t20">
				<text class="titles">图验证码</text>
				<view class="inputDiv" style="border:none;">
					<view class="inputClass_1">
						<input class="inputClass inputYzm" v-model="imgCode" />
					</view>
					<view v-if="!yzmCodeImg" class="yzmTime" @tap="showTapImg">获取验证码</view>
					<image v-else class="yzmCode" :src="yzmCodeImg" @tap="showTapImg" mode=""></image>
				</view>
			</view>


			<view class="Items m-t20">
				<text class="titles">验证码</text>
				<view class="inputDiv" style="border:none;">
					<view class="inputClass_1">
						<input class="inputClass inputYzm" v-model="phoneCode" />
					</view>
					<view v-if="time==0" class="yzmTime" @tap="djsTap">短信验证码</view>
					<view v-else class="yzmTime" style="color:#C0C0C0;">倒计时{{time}}秒</view>
				</view>
			</view>

			<view class="Items m-t20">
				<text class="titles">姓名</text>
				<view class="inputDiv">
					<input class="inputClass" v-model="name" />
				</view>
			</view>

			<view class="Items m-t20">
				<text class="titles">邮箱</text>
				<view class="inputDiv">
					<input class="inputClass" v-model="emails" />
				</view>
			</view>

			<view class="Items m-t20">
				<text class="titles">登录密码</text>
				<view class="inputDiv">
					<input class="inputClass" v-model="password" />
				</view>
			</view>

			<view class="Items m-t20">
				<text class="titles">确认密码</text>
				<view class="inputDiv">
					<input class="inputClass" v-model="qrpassword" />
				</view>
			</view>


			<view class="Items m-t20">
				<text class="titles">用户类型</text>
				<view class="inputDiv" style="border:none;">
					<radio-group @change="radioChange">
						<label style="margin-left:60rpx;">
							<radio :value="'1'" />单位
						</label>
						<label style="margin-left:60rpx;">
							<radio :checked="true" :value="'2'" />个人
						</label>
					</radio-group>
				</view>
			</view>

			<template v-if="userzcType==1">
				<view class="Items m-t20 show1">
					<text class="titles">单位名称</text>
					<view class="inputDiv">
						<input class="inputClass" v-model="unitName" />
					</view>
				</view>
			</template>




			<view class="xyDiv m-t20">
				<checkbox-group @change="checkboxChange">
					<checkbox value="cb" style="transform:scale(0.8);" :checked="true" />
				</checkbox-group>
				<text class="xyText">我已经阅读并同意<text style="color: #007AFF;" @tap="getUserXy('user')">《用户协议》</text>和<text
						style="color: #007AFF;" @tap="getUserXy('privacy')">《隐私策略》</text></text>
			</view>


			<view class="btns" hover-class="btnshover" @tap="userLogin">注册</view>

		</view>






		<!--遮罩层1-->
		<view class="zzc" @tap="showPicker=false" :class="showPicker==false?'zzcHide':''"></view>
		<!--协议-->
		<view class="showPickerDiv" :class="showPicker==true?'showSixH':''">
			<!-- <text class="xyTitle">协议内容</text> -->
			<scroll-view scroll-y="true" style="height:600rpx;margin:auto;">
				<view class="xy-details" v-html="xyDetails"></view>
			</scroll-view>
		</view>






	</view>
</template>

<script>
	import {
		sendUserCode,
		getAgreement,
		postRegister
	} from '@/common/api/table.js';
	export default {
		data() {
			return {
				showPicker: false,
				djsTime: 60,
				time: 0,
				timeOut: '',
				userzcType: 2, //1 单位 2个人
				xyType: false, //协议是否选中 true选中 false未选中
				xyDetails: '', //协议内容
				yzmCodeImg: '',
				imgCode: '',
				//参数
				phone: '',
				phoneCode: '',
				name: '',
				emails: '',
				password: '',
				qrpassword: '',
				unitName: '',
				xyDetails: '',

			}
		},
		watch:{
			phone(val){
				let apiurl = uni.getStorageSync('serverUrl');
				if (val) {
					//验证手机号
					var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
					if (!myreg.test(val)) {
						this.yzmCodeImg = ''
						return;
					} else {
						this.yzmCodeImg = '';
						let timestamp = Date.parse(new Date());
						this.yzmCodeImg =
							`${apiurl}/verifyCode/registerImageCode?timestamp=${timestamp}&userPhone=${val}`;
					
					}	
				}
			}
		},
	
		methods: {

			getUserXy(str) {
				getAgreement({
						code: str
					})
					.then(res => {
						if (res.code == 200) {
							this.xyDetails = res.data;
							this.showPicker = true;
						}
					})
			},

			showTost(msg) {
				uni.showToast({
					icon: 'none',
					title: msg
				});
			},

			userLogin() {
				
				if (!this.phone) {
					this.showTost('请输入电话号码');
					return;
				}
				if (!this.imgCode) {
					this.showTost('请输入图形验证码');
					return;
				}
				if (!this.phoneCode) {
					this.showTost('请输入短信验证码');
					return;
				}
				if (!this.name) {
					this.showTost('请输入姓名');
					return;
				}
				if (!this.emails) {
					this.showTost('请输入邮箱');
					return;
				}
				if (!this.password) {
					this.showTost('请输入登录密码');
					return;
				}
				if (!this.qrpassword) {
					this.showTost('请输入确认密码');
					return;
				}
				// 1.单位 2.个人
				if (this.userzcType == 1) {
					if (!this.unitName) {
						this.showTost('请输入确认密码');
						return;
					}
				}
				//2次密码效验
				if (this.password !== this.qrpassword) {
					this.showTost('2次密码输入不一致');
					return;
				}


				let obj = {
					realName: this.name,
					password: this.password,
					email: this.emails,
					companyName: this.unitName,
					userPhone: this.phone,
					userType: this.userzcType,
					vCode: this.phoneCode
				};
				uni.showLoading({
					title: '注册中...'
				});
				postRegister(obj)
					.then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							uni.showToast({
								icon: 'none',
								title: '注册成功'
							});
							setTimeout(() => {
								let objte = {
									phone: this.phone,
									password: this.password
								};
								uni.reLaunch({
									url: `user-dl?userObj=${JSON.stringify(objte)}`
								})
							}, 1500)
						}
					})




			},

			showTapImg() {
				if (this.phone) {
					//验证手机号
					var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
					if (!myreg.test(this.phone)) {
						uni.showToast({
							title: '输入手机号不正确',
							icon: 'none'
						})
						return;
					} else {
						this.yzmCodeImg = '';
						let timestamp = Date.parse(new Date());
						this.yzmCodeImg =
							`${this.$serverUrl}/verifyCode/registerImageCode?timestamp=${timestamp}&userPhone=${this.phone}`;
					
					}	
				} else {
					uni.showToast({
						title: '请先输入手机号',
						icon: 'none'
					})
				}
			},

			checkboxChange(e) {
				if (e.detail.value.length > 0) {
					this.xyType = true;
				} else {
					this.xyType = false;
				}
			},

			radioChange(e) {
				this.userzcType = Number(e.detail.value);
			},
			
			
			
			
			
			

			//手机验证码
			djsTap() {

				if (this.phone) {
					//验证手机号
					var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
					if (!myreg.test(this.phone)) {
						uni.showToast({
							title: '输入手机号不正确',
							icon: 'none'
						})
						return;
					} else {
						if (this.imgCode) {
							//发送请求获取短信验证码
							let obj = {
								imgCode: this.imgCode,
								userPhone: this.phone
							};
							sendUserCode(obj)
								.then(res => {
									if (res.code == 200) {
										this.timeOut = setInterval(() => {
											this.time = this.djsTime--;
											if (this.time == 1) {
												this.time = 0;
												this.djsTime = 60;
												clearInterval(this.timeOut);
											}
										}, 1000);
									}
								})
						} else {
							//填写了电话号码没填写图形验证码
							uni.showToast({
								title: '请填写图形验证码',
								icon: 'none'
							})
							return;
						}
					}
				} else {
					uni.showToast({
						title: '请先输入手机号',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.zcBody {
		width: 750rpx;
		height: 100vh;
	}

	.titlesName {
		width: 100%;
		text-align: center;
		color: black;
		font-size: 45rpx;
		margin-top: 30rpx;
	}

	.userDetails {
		width: 690rpx;
		border-radius: 15rpx;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		padding: 30rpx 0;
		margin: 0 auto;
		margin-top: 50rpx;
		background-color: white;

		.Items {
			width: 690rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			flex-direction: row;
			justify-content: center;

			.titles:before {
				content: '* ';
				color: red;
			}

			.titles {
				font-size: 25rpx;
				width: 120rpx;
				text-align: end;
			}

			.inputDiv {
				width: 430rpx;
				height: 60rpx;
				margin-left: 20rpx;
				border: 1rpx solid #C0C0C0;
				border-radius: 15rpx;
				display: flex;
				align-items: center;

				.inputClass {
					width: 400rpx;
					height: 60rpx;
					margin-left: 20rpx;
					border: 0;
					margin-top: 0;
				}

				.inputYzm {
					width: 230rpx !important;
				}

				.yzmTime {
					font-size: 25rpx;
					margin-left: 20rpx;
				}
			}
		}
	}

	.m-t20 {
		margin-top: 30rpx;
	}

	.xyDiv {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.xyText {
		color: #C0C0C0;
		font-size: 27rpx;
		margin-left: 15rpx;
	}


	.zzc {
		width: 100%;
		height: 100%;
		display: block;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0rpx;
		z-index: 20;
		transition: all 2s;
	}

	.zzcHide {
		display: none !important;
	}

	.showSixH {
		height: 750rpx !important;
	}

	.showPickerDiv {
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		width: 750rpx;
		position: fixed;
		bottom: 0rpx;
		height: 0rpx;
		transition: height 0.5s;
		background-color: white;
		z-index: 999;
		display: flex;
		flex-direction: column;
		align-items: center;

		.xyTitle {
			color: black;
			font-size: 35rpx;
			font-family: "Microsoft Ya Hei";
			margin-top: 35rpx;
		}

		.xy-details {
			margin: 10rpx auto;
			width: 690rpx;
			margin-top: 20rpx;
			font-family: "Microsoft Ya Hei";
			color: 22rpx;
			color: #000000;
		}
	}

	.btns {
		width: 550rpx;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
		color: white;
		background-color: #003bfe;
		border-radius: 15rpx;
		margin: 0 auto;
		margin-top: 40rpx;
	}

	.btnshover {
		background-color: #1980fe;
	}

	.yzmCode {
		width: 150rpx;
		height: 80rpx;
		margin-left: 20rpx;
	}

	.inputClass_1 {
		width: 250rpx;
		height: 60rpx;
		border: 1rpx solid #C0C0C0;
		box-sizing: border-box;
		border-radius: 15rpx;
	}
</style>
